<template>
  <div class="wrapper">
    <div id="chart2" class="chart2" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PolarCharts',
  props: {
    msgs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  watch: {
    msgs: {
      deep: true,
      handler(newdata) {
        this.drawChart(newdata)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart(this.msgs)
    })
  },
  methods: {
    drawChart(data) {
      // 基于准备好的dom，初始化echarts实例
      const chart = echarts.init(document.getElementById('chart2'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function() {
        chart.resize()
      })
      // 绘制图表
      chart.setOption({
        title: {
          text: '大五人格（30维度）'
        },
        radar: {
          indicator: (function() {
            // 模拟指示器
            const indictors = []
            const max = Math.max(...data)
            const personality_name = ['想象力', '审美', '感受丰富', '尝新', '思辨', '价值观', '能力', '条理性', '责任感', '追求成就', '自律', '审慎', '热情', '乐群性', '独断性', '活力', '寻求刺激', '积极情绪', '信任', '坦诚', '利他', '顺从', '谦逊', '同理心', '焦虑', '愤怒与敌意', '抑郁', '自我意识', '冲动性', '脆弱性']
            // 指示器和数据要对应
            for (var i = 0; i < 30; i++) {
              indictors.push({
                text: personality_name[i],
                max
              })
            }
            return indictors
          })()
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: data,
                name: 'Allocated Budget',
                lineStyle: {
                  type: 'dashed'
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .chart2 {
    width: 100%;
    margin:0 auto;
    height: 600px;
    /* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/
    background-size: 100% 100%;
  }
</style>
